<template>
  <div class="flex flex-col min-h-screen bg-weather bg-opacity-100">
    <header class="bg-weather bg-opacity-100 shadow-lg sticky top-0 z-10">
      <nav
        class="flex flex-col max-w-full container sm:flex-row items-center gap-4 text-white py-6"
      >
        <router-link to="/"
          ><div class="flex items-center gap-3">
            <i class="fa-solid fa-sun text-2xl"></i>
            <p class="text-2xl">新中地天气</p>
          </div></router-link
        >
        <div class="flex gap-4 items-center">
          <h4 class="text-lg">{{ nowBase.city }}</h4>
          <span class="text-sm"
            >实时天气：{{ nowBase.weather }} {{ nowBase.temperature }}℃</span
          ><span class="text-sm"
            >{{ nowBase.winddirection }}{{ nowBase.windpower }}级</span
          >
        </div>
        <div class="flex gap-3 flex-1 justify-end">
          <i
            class="fa-solid fa-circle-info text-xl hover:text-weathers cursor-pointer duration-1000"
            @click="handleShow()"
          ></i>
          <i
            class="fa-solid fa-plus text-xl hover:text-weathers duration-150 cursor-pointer"
            v-if="$route.name === 'weather' && isShow === true"
            @click="handleAddCity(cityAdcode)"
          ></i>
        </div>
      </nav>
    </header>
   
    <router-view></router-view>
    <div
      class="fixed z-20 w-full bg-black bg-opacity-30 h-screen top-0 left-0 flex justify-center px-8 text-black duration-300 "
      :class="animation"
      v-if="show"
    >
      <div class="p-4 bg-white self-start mt-32 max-w-screen-md ">
        <h2>关于:</h2>
        <p class="text-xs mb-4">这个应用可以用来追踪你选择城市的当前天气</p>
        <h2>如何使用:</h2>
        <p class="text-xs mb-4">
          1.点击搜索框输入你希望追踪的城市<br />
          2.在搜索结果中选中一个城市，你将获取当地最新的天气<br />
          3.点击右侧的＋号可以将追踪城市的天气情况保存在首页
        </p>
        <h2>移除城市:</h2>
        <p class="text-xs">
          如果你不想在首页关注某个城市,可以通过底部的按钮删<br />除它
        </p>
        <button class="text-white mt-8 bg-weather py-2 px-6 text-xs close-btn" @click="handledown()">
          关闭
        </button>
      </div>
    </div>
  </div>
</template>

<script>
import { RouterLink, RouterView } from 'vue-router';
import { getNowBase } from '@/api/index.js';
import axios from 'axios';
export default {
  data() {
    return {
      nowBase: {},
      cityAdcode: '',
      city: '',
      cityName: '',
      isShow: false,
      show: false,
      animation: '',
    };
  },
  methods: {
    handleAddCity(adcode) {
      this.isShow = false;
      const url = `https://restapi.amap.com/v3/weather/weatherInfo?city=${adcode}&key=a9f817f97dc77012f714e1534dd24fb1&extensions=base`;
      axios.get(url).then((res) => {
        this.city = res.data.lives[0].city;
        const temperature = res.data.lives[0].temperature + '度';
        console.log(this.city, temperature);
        window.localStorage.setItem(this.city, adcode);
      });
    },
    handleShow() {
      this.show = true;
     this.animation = 'animate-[wiggle_1s]';
    },
    handledown() {
      this.animation = 'animate-[wiggle2_1s]';
      setTimeout(() => {this.show = false;}, 1000)
    },
  },
  async mounted() {
    const res = await getNowBase();
    this.nowBase = res.data.lives[0];
  },
  watch: {
    $route: {
      handler(val, oldVal) {
        if (val.name === 'weather') {
          this.isShow = false;
          const str = window.location.href.split('weather/')[1];
          this.cityAdcode = str.split('?')[0];
          const src = decodeURI(window.location.href);
          this.cityName = src.split('=')[1];
          const key = localStorage.getItem(this.cityName);
          console.log(key !== null, 'this.key===null');
          if (key === null) {
            this.isShow = true;
          }
        }
        console.log(val.name, oldVal.name);
      },
    },
    deep: true,
  },
};
</script>
